<template>
  <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
    <el-badge :max="99" :value="count" :hidden="count == 0" class="item">
      <i class="el-icon-message-solid" style="font-size: 22px"></i>
    </el-badge>
    <el-dropdown-menu slot="dropdown">
      <router-link to="/work/todo">
        <el-dropdown-item>流程：{{ countInfo.flow || 0 }}</el-dropdown-item>
      </router-link>
      <el-dropdown-item @click.native="jumpYw">
        <span>业务：{{ countInfo.yw || 0 }}</span>
      </el-dropdown-item>
      <!-- <el-dropdown-item @click.native="allRead">
        <span>标记已读</span>
      </el-dropdown-item> -->
    </el-dropdown-menu>
  </el-dropdown>
</template>
<script>
import store from "@/store";
import { allRead } from "../../api/system/message";
export default {
  data() {
    return {};
  },
  computed: {
    count() {
      return this.$store.getters.countAll;
    },
    countInfo() {
      return this.$store.state.user.count;
    },
  },
  mounted() { },
  methods: {
    allRead() {
      allRead().then(res => {
        if (res.code == 200) {
          this.count  = 0
        }
      })
    },
    jumpYw() {
      this.$router.push("/system/message?isDone=0");
    },
    jumpFlow() {
      this.$router.push("/work/todo");
    },
  },
};
</script>
<style lang="scss" scoped>
.avatar-container {
  margin-right: 0 !important;

  .avatar-wrapper {
    margin-top: 5px;
    position: relative;

    .user-avatar {
      cursor: pointer;
      width: 40px;
      height: 40px;
      border-radius: 10px;
    }

    .el-icon-caret-bottom {
      cursor: pointer;
      position: absolute;
      right: -20px;
      top: 25px;
      font-size: 12px;
    }
  }
}

.countClass {
  cursor: pointer;
  display: flex;
  align-items: center;

  div+div {
    margin-left: 10px;
  }
}

::v-deep .el-badge__content.is-fixed {
  top: 8px !important;
}
</style>
